import React, { useState } from 'react';
import { View, Text, Image, StyleSheet, TextInput, ScrollView } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { tintColorLight } from '@/constants/Colors';
import { Ionicons } from '@expo/vector-icons';
import { SafeAreaView } from 'react-native-safe-area-context';
import { LinearGradient } from 'expo-linear-gradient'; // 导入 LinearGradient
import TabItem from '@/components/TabItem';
import HomeView from './components/HomeView';
const Stack = createStackNavigator();
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100%',
    },
    searchContainer: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff',
        borderRadius: 20,
        paddingHorizontal: 10,
        flex: 1,
        width: '100%',
        minWidth: 300,

    },
    input: {
        flex: 1,
        height: 35,
        borderColor: 'transparent'
    },
    icon: {
        color: '#000',
        // maxWidth: 120,
        textAlign: 'center',
    },
    iconContainer: {
        justifyContent: 'center', // 垂直居中
        alignItems: 'center', // 水平居中
        height: '100%', // 使容器高度与导航栏一致
        paddingHorizontal: 10, // 添加左右间距
    },
    scrollView: {
        flex: 1,
    },

});
const Home = () => {
    return <LinearGradient
        colors={['pink', '#fff']} // 渐变颜色
    >
        <SafeAreaView style={{ backgroundColor: "" }}>
            <ScrollView>
                <View style={styles.container}>
                    <View style={{ flexDirection: 'row', alignItems: 'center', paddingHorizontal: 10, backgroundColor: 'pink' }}>
                        <View style={styles.iconContainer}>
                            <Ionicons name="scan-outline" size={18} style={styles.icon} />
                        </View>
                        <View style={styles.searchContainer}>
                            <TextInput
                                placeholderTextColor="#eee"
                                underlineColorAndroid={'transparent'}
                                style={styles.input}
                                placeholder="搜索"
                            />

                        </View>
                        <View style={styles.iconContainer}>
                            <Ionicons name="search-outline" size={18} style={styles.icon} />
                        </View>
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    </LinearGradient>
}
const App = () => {
    const [title, setTitle] = useState<string>('')
    return (
        <View style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
            <Home></Home>
            <TabItem setTitle={setTitle}></TabItem>

            <ScrollView style={{ flex: 1, }}>
                <HomeView title={title} onCallback={() => { setTitle('') }}></HomeView>
            </ScrollView>
        </View>
        // <Stack.Navigator screenOptions={{
        //     headerShown: true, // 显示头部
        //     headerBackVisible: false, // 隐藏返回按钮
        //     headerTitleAlign: 'center', // 标题居中
        //     headerStyle: { borderBottomWidth: 0, backgroundColor: tintColorLight, height: 15, margin: 0 }, // 去掉下划线
        //     headerTitleStyle: { fontSize: 18, fontWeight: 'bold' },
        //     headerTintColor: '#fff',
        //     headerLeft: () => (
        //         <View style={styles.iconContainer}>
        //             <Ionicons name="scan-outline" size={18} style={styles.icon} />
        //         </View>
        //     ),
        //     headerRight: () => (
        //         <View style={styles.iconContainer}>
        //             <Ionicons name="search-outline" size={18} style={styles.icon} />
        //         </View>
        //     ),
        //     headerTitle: () => (
        //         <View style={styles.searchContainer}>
        //             <TextInput
        //                 placeholderTextColor="#eee"
        //                 underlineColorAndroid={'transparent'}
        //                 style={styles.input}
        //                 placeholder="搜索"
        //             />

        //         </View>
        //     ),

        // }} >
        //     <Stack.Screen name="Home" component={Home} options={{ title: '首页' }} />
        // </Stack.Navigator>

    )
}
export default App;